<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style>
/* =slider 其中高宽等可自行根据需要定义 */
.slider { position:relative; z-index:0; height:250px;}
.slider li { display:none; position:absolute; top:0; left:0; z-index:1; width:500px; height:250px; overflow:hidden;}
.slider li:first-child { display:block;}
.slider li > img { display:block; max-width:700px;}
/* =slider image nav 1 2 3 */
.slider .image_nav { position:absolute; bottom:2px; right:70px; z-index:4}
.slider .image_nav i { cursor:pointer;}
.slider .image_nav a, .slider .image_nav i { display:inline-block; zoom:1; *display:inline; margin-left:5px; 
	background:#FC0; color:#000; padding:0 5px; font-family:gotham_web;}
.slider .image_nav a.on { background:none;}
.slider .image_nav a:hover, .slider .image_nav i:hover { color:#FFF;}
ul,li {list-style:none;margin:0px;padding:50px;}
</style>
</head>
<body style="background:#e34680;" onload="userfocus()">
<script>
jQuery(document).ready(function($) {
	$(function(){
		$.fn.extend({
			slider: function(showTime, number_nav, contect_nav){   // 三个参数，分别是自动播放间隔时间(1000为1s)、是否显示数字导航(1/0)、是否显示 < > 导航(1/0)
				if(!showTime) showTime = 5000;   // 默认 自动播放间隔时间 5秒
				var _autoPlay = 0;
				var itemI = 1;
				var $this = $(this);
				var $autoItems = $this.children();
				var itemLength = $autoItems.length;				
				if( itemLength > 1 ){
					if(number_nav){
						var nav = '<a href="#" class="on">1</a>';
						for(var i=1; i<itemLength; i++){
							nav += '<a href="#">'+ ( i+1 ) +'</a>';
						}
						$this.after('<p class="image_nav">' + nav + '</p>');
						var nav_item =  $(this).next('p');
						var nav_items =  nav_item.children();
					}
					if(contect_nav){
						if( number_nav ){
							nav_item.prepend('<i class="prev">&lt;</i>').append('<i class="next">&gt;</i>');
							nav_items =  $this.next('p').children();
						} else {
							$this.after('<p class="image_nav"><i class="prev">&lt;</i><i class="next">&gt;</i></p>');
							var nav_items = $this.next('p').children();
						}
					}
	 
					_autoPlay = setInterval(function(){
							autoPlay(itemI);
							itemI++;
							itemI = itemI === itemLength ? 0 : itemI;
						}, showTime);
	 
					function autoPlay(itemI){
						$autoItems.eq(itemI).css('z-index', 3).fadeIn(800, function(){
							$(this).addClass('on').siblings().css('z-index', 1).removeClass('on').hide();
							$(this).css('z-index', 2);		
						});
						if( number_nav ){
							nav_item.children('a').eq(itemI).addClass('on').siblings('a').removeClass();
						}	
					}
	 
	 
					if( number_nav || contect_nav ){						
						nav_items.click(function(){
							if( $(this).attr('class') == 'next' || $(this).attr('class') == 'prev' ){
								var i = ( $autoItems.filter(':visible').index() );
								itemI = $(this).attr('class') == 'next' ? i+1 : i-1;							
								itemI = itemI === itemLength ? 0 : itemI;	
							} else {
								itemI = parseInt($(this).text()) - 1;
							}						
							autoPlay(itemI);
							return false;
						})
	 
						//鼠标移入停止自动播放，移出 恢复自动播放
						$this.parent().hover(function(){
							clearInterval(_autoPlay);
						}, function(){
							_autoPlay = setInterval(function(){
								autoPlay(itemI);
								itemI++;
								itemI = itemI === itemLength ? 0 : itemI;
							}, showTime);
						});
					}
				}
			}
		})
	 
		// 使用slider() 定义动画，输入相关参数（如下：每隔5秒自动播放下一张）, #slider 即为 HTML 中 ul 的 id.
		$('#slider').slider(3000, 1, 1);
	})
	});
</script>
<script type="text/javascript">
function userfocus(){
	document.login.username.focus();
}
function CheckForm()
{
	if(document.login.username.value == "")
	{
		alert("Please input user name！");
		document.login.username.focus();
		return false;
	}
	if(document.login.password.value == "")
	{
		alert("Please choose a Password！");
		document.login.password.focus();
		return false;
	}
	if (document.login.validate.value == "")
	{
        alert ("Please enter your verification code！");
        document.login.validate.focus();
        return(false);
    }
}
</script>

<div>
  <div class="dltop">
  <div class="eventShow slider dl">
	<ul id="slider">
		<li><img src="flash/a.jpg" alt="" /></li>
		<li><img src="flash/b.jpg" alt="" /></li>
		<li><img src="flash/c.jpg" alt="" /></li>
		<li><img src="flash/d.jpg" alt="" /></li>
		<li><img src="flash/e.jpg" alt="" /></li>
		<li><img src="flash/f.jpg" alt="" /></li>
	</ul>
</div> 
  </div>
  <div class="dlcenter">
    <div class="dl">
    <form name="login" action="login_check.php" method="post" onSubmit="return CheckForm();">
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="66">Username:</td>
          <td width="108"><input class="dlinput" name="username" type="text" style="width:100px;" /></td>
          <td width="62">Password:</td>
          <td width="123"><input class="dlinput" name="password" type="password" style="width:100px;"/></td>
          <td width="103">Verification code:</td>
          <td width="138"><input type="text"  name="validate" id="vdcode" style="width:50px;font-weight:normal;" class="dlinput" />&nbsp;<img id="ckstr" name="ckstr" src="include/ckstr.php" title="Can't see? Click on the change" align="absmiddle" style="cursor:pointer" onClick="this.src=this.src+'?'" /></td>
        </tr>
        <tr height="60px;">
          <td colspan="6" align="right"><input type="radio" name="usertype" value=1>Admin &nbsp<input type="radio" name="usertype" value=0 checked>Member&nbsp&nbsp&nbsp<input class="dlbutton" name="" type="submit" value="" /></td>
        </tr>
      </table>
      </form>
    </div>
    
  </div>
</div>
</body>
</html>
